<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-10-16 11:13:39
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-22 14:15:03
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-10-16 11:13:39
-->
<template>
  <div class="flex">
    <aCard title="基本用法">
      <!-- <a-input
        :style="{ width: '320px' }"
        placeholder="Please enter something"
        allow-clear
      />
      <a-input
        :style="{ width: '320px' }"
        default-value="content"
        placeholder="Please enter something"
        allow-clear
      /> -->
    </aCard>
    <a-form
      ref="formRef"
      auto-label-width
      :rules="rules"
      :model="form"
      @submit="handleSubmit"
    >
      <a-form-item field="name" tooltip="Please enter username" label="name">
        <a-input
          v-model="form.name"
          placeholder="please enter your username..."
        />
      </a-form-item>
      <a-form-item field="password" label="密码">
        <a-input
          v-model="form.password"
          placeholder="please enter your password..."
        />
      </a-form-item>
      <a-form-item field="password2" label="确定密码">
        <a-input
          v-model="form.password2"
          placeholder="please enter your post..."
        />
        <template #help>
          <div>Used to login</div>
        </template>
      </a-form-item>
      <a-form-item field="ces" label="测试" :rules="ruless">
        <a-input
          v-model="form.ces"
          placeholder="please enter your username..."
        />
        <template #extra>
          <div>Used to login</div>
        </template>
        <template #help>
          <div>Custom valitae message</div>
        </template>
      </a-form-item>
      <!-- <a-form-item field="isRead">
        <a-checkbox v-model="form.isRead"> I have read the manual </a-checkbox>
      </a-form-item> -->
      <a-form-item>
        <a-button html-type="submit" @click="Submit">Submit</a-button>
        <a-button html-type="submit" @click="$refs.formRef.resetFields()"
          >重置</a-button
        >
      </a-form-item>
    </a-form>
    {{ form }}
  </div>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  setup() {
    const form = reactive({
      name: "1",
      password: "2",
      ces: "",
      password2: "",
    });

    const rules = {
      name: [
        {
          required: true,
          message: "name is required",
        },
      ],
      password: [
        {
          required: true,
          message: "password is required",
        },
      ],
      password2: [
        {
          required: true,
          message: "password is required",
        },
        {
          validator: (value, cb) => {
            if (value !== form.password) {
              cb("two passwords do not match");
            } else {
              cb();
            }
          },
        },
      ],
    };

    const ruless = [
      {
        validator: (value, cb) => {
          return new Promise((resolve) => {
            setTimeout(() => {
              if (value !== "admin") {
                cb("name must be admin");
              }
              resolve();
            }, 2000);
          });
        },
      },
    ];

    const formRef = ref("");
    const handleSubmit = (data) => {
      console.log(data);
    };

    function Submit() {
      formRef.value.handleSubmit();
    }

    return {
      formRef,
      form,
      handleSubmit,
      Submit,
      rules,
      ruless,
    };
  },
};
</script>

<style lang="scss">
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
  //   background: #e5e5e5;
}
:deep(.arco-card) {
  margin-bottom: 30rpx;
}

:deep(.arco-tag) {
  margin: 15rpx 10rpx;
}
</style>
